<template>
  <div class="app-container">
    <!-- 查询 -->
    <div class="container-module" style="padding: 20px 0 0 0;">
      <el-form class="searchForm" :class="ifShowSearch?'':'overoverflow-hidden'" :inline="true" ref="searchForm" :model="searchForm" label-width="85px" size="small">
        <div ref="formitem">
          <el-form-item label="供货商名称">
            <el-input v-model="searchForm.supplier_name" placeholder="请输入供货商名称" clearable />
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input v-model="searchForm.sg_name" placeholder="请输入商品名称" clearable />
          </el-form-item>
          <el-form-item label="商品类型">
            <el-select v-model="searchForm.type" placeholder="请选择商品分类" clearable>
              <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="商品类目">
            <el-cascader v-model="category_id" :options="tableData" :props="{
              checkStrictly: true,
              value: 'id',
              label: 'category_name',
              children: 'children',
            }" collapse-tags clearable />
          </el-form-item>
          <el-form-item label="生效状态">
            <el-select v-model="searchForm.status" placeholder="请选择生效状态" clearable>
              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="searchFormtime"
              clearable
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </div>
        <div class="SearchBtn">
          <el-button type="primary" size="small" icon="el-icon-search" @click="doSearchGoods">查询</el-button>
          <el-button size="small" icon="el-icon-refresh" @click="resetSearch">重置</el-button>
          <el-button size="small" :icon="ifShowSearch ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
            @click="ifShowSearch = !ifShowSearch">{{ ifShowSearch ? '收起' : '展开' }}</el-button>
        </div>
      </el-form>
    </div>
    <el-divider></el-divider>
    <div class="addAndTableRelate">
      <div>
        <el-button icon="el-icon-plus" type="primary" size="small" @click="addDrawer('添加选品')">添加选品</el-button>
      </div>
      <div>
        <!-- <el-button icon="el-icon-download" type="primary" size="small" plain style="margin-right: 10px;">批量导出</el-button> -->
        <el-dropdown trigger="click" :hide-on-click="false">
          <span class="el-dropdown-link">
            <el-button icon="el-icon-s-operation" style="padding: 5px; font-size: 16px;"></el-button>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
              <el-checkbox v-model="checkboxTableThead" :label="fruit">
                {{ tableTheadOptions[fruit].label }}</el-checkbox>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <!-- 列表 -->
    <div style="margin-top: 20px">
      <el-table v-loading="loading"
        :header-cell-style="{ 'background-color': '#e5eeff', color: '#5f687c', height: '47px', fontWeight: 'normal' }"
        highlight-current-row :max-height="tableHeight" :data="tableList" style="width: 100%">
        <el-table-column v-for="fruit in tableThead" :key="fruit" :label="tableTheadOptions[fruit].label"
          :min-width="tableTheadOptions[fruit].minwidth" align="center">
          <template slot-scope="scope">
            <div v-if="fruit == 'sg_name'">
              <!-- 商品名称 -->
              <el-tooltip :content="scope.row.sg_name" :disabled="isShowTooltip" effect="dark" placement="top">
                <div @mouseover="onMouseOver(scope.row.sg_name)"
                  style="overflow: hidden;  text-overflow: ellipsis; white-space: nowrap;">
                  <span :ref="scope.row.sg_name">{{ scope.row.sg_name }}</span>
                </div>
              </el-tooltip>
            </div>
            <div v-else-if="fruit=='product_code'">
              <!-- 商品编号 -->
              <el-tooltip :content="scope.row.product_code" :disabled="isShowTooltip" effect="dark" placement="top">
                <div @mouseover="onMouseOver(scope.row.product_code)"
                  style="overflow: hidden;  text-overflow: ellipsis; white-space: nowrap;">
                  <span :ref="scope.row.product_code">{{ scope.row.product_code }}</span>
                </div>
              </el-tooltip>
            </div>
            <div v-else-if="fruit == 'main_image'">
              <!-- 商品缩略图 -->
              <div style="height:30px;">
                <el-image v-if="scope.row.main_image" style="width: 30px; height: 30px;border-radius: 5px;"
                  :src="scope.row.main_image" />
                <div v-else>-</div>
              </div>
            </div>
            <div v-else-if="fruit == 'status'">
              <!-- <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2"
                @change="switchShowWay(scope.row)" /> -->
                <span :style="{'color': scope.row.status==1?'#67C23A':'#F56C6C'}">{{ scope.row.status==1 ? '启用' : '禁用' }}</span>
            </div>
            <div v-else>
              <el-tooltip
                placement="top-start"
                :content="scope.row[fruit] + ''"
              >
                <div class="one_line_hidden">
                  {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                </div>
              </el-tooltip>

            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="" label="库存明细">
          <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="inventory_details(scope.row)">
            库存明细
          </el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" width="200" prop="address" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="goEditGoodsOrDetail(scope.row, false)">选品详情</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" size="mini" @click="goEditGoods(scope.row, true)" style="margin-left:0;">编辑</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-popconfirm title="确定删除吗？" @confirm="delSelectGoods(scope.row)">
              <el-button v-hasPermi="'selecgoods/del'" slot="reference" type="text" size="mini">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: right;margin-top: 10px;">
        <el-pagination :current-page="searchForm.page" :page-sizes="[10, 20, 30, 40]" :page-size="searchForm.count"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
    <add v-if="ifshowadd" :title="drawerTitle"></add>
    <rule v-if="ifshowrule" :title="ruletitle" :id="id" :goodsdetailx="goodsdetailx" :goodsdetail="goodsdetail"></rule>

    <!-- 详情 -->
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="选品详情" size="70%" :withHeader="false"
      :visible.sync="dialogdictionary" @close="userHandleClose" :show-close="true">
      <div style="position: relative;margin-bottom: 0px;">
        <div class="drawerTitle">
          <span>基本信息</span>
          <div class="close" @click="userHandleClose">
            <i class="el-icon-close" style="font-size: 24px;"></i>
          </div>
        </div>
      </div>
    <!-- <el-drawer title="选品详情" size="800px" :visible.sync="dialogdictionary" :direction="direction"> -->
      <div style="position: relative; padding: 15px 30px" v-loading="btnLoading">
        <div class="informationTitleView">
          <div class="leftBox" style="padding-left: 0;">
            <div class="leftborder"></div>
            <div class="text">商品信息</div>
          </div>
          <div class="right"></div>
        </div>
        <el-descriptions class="margin-top" title="" :column="2">
          <el-descriptions-item label="商品名称">
            {{
              updateGoodsFrom.sg_name ? updateGoodsFrom.sg_name : "无"
            }}</el-descriptions-item>
          <el-descriptions-item label="商品ID">
            {{ updateGoodsFrom.id }}</el-descriptions-item>
          <el-descriptions-item label="库存数量">
            {{
              updateGoodsFrom.sku ? updateGoodsFrom.sku.inventory : ""
            }}</el-descriptions-item>

          <el-descriptions-item label="提货券价格">
            {{
              updateGoodsFrom.sku ? updateGoodsFrom.sku.voucher_price : ""
            }}</el-descriptions-item>
          <el-descriptions-item label="平台分类">
            {{
              updateGoodsFrom.sku ? updateGoodsFrom.sku.gc_name : ""
            }}</el-descriptions-item>
        </el-descriptions>
        <div class="informationTitleView">
          <div class="leftBox" style="padding-left: 0;">
            <div class="leftborder"></div>
            <div class="text">价格参考</div>
          </div>
          <div class="right"></div>
        </div>
        <el-descriptions style="margin-top: 30px" class="margin-top" title="" :column="3">
          <el-descriptions-item label="现金参考价">
            {{
              updateGoodsFrom.sku
              ? updateGoodsFrom.sku.suggestion_price.retail_price
              : "无"
            }}</el-descriptions-item>
          <!-- <el-descriptions-item label="积分参考价">
            {{
              updateGoodsFrom.sku
              ? updateGoodsFrom.sku.suggestion_price.integral_price
              : "无"
            }}</el-descriptions-item> -->
          <!-- <el-descriptions-item label="积分参考手续费">
            {{
              updateGoodsFrom.sku
              ? updateGoodsFrom.sku.suggestion_price.integral_scale
              : ""
            }}</el-descriptions-item> -->
          <!-- <el-descriptions-item label="提货券参考价">
            {{
              updateGoodsFrom.sku
              ? updateGoodsFrom.sku.suggestion_price.voucher_price
              : ""
            }}</el-descriptions-item> -->
          <!-- <el-descriptions-item label="提货券参考手续费">
            {{
              updateGoodsFrom.sku
              ? updateGoodsFrom.sku.suggestion_price.voucher_scale
              : ""
            }}</el-descriptions-item> -->
        </el-descriptions>
        <div class="informationTitleView">
          <div class="leftBox" style="padding-left: 0;">
            <div class="leftborder"></div>
            <div class="text">针对用户的规则</div>
          </div>
          <div class="right"></div>
        </div>
        <el-descriptions style="margin-top: 30px" title="" :column="3">
          <el-descriptions-item label="支付类型">
            <span v-if="updateGoodsFrom.for_user_info
              ? updateGoodsFrom.for_user_info.pay_type == 1
              : ''
              " size="mini">现金</span>
            <span v-if="updateGoodsFrom.for_user_info
              ? updateGoodsFrom.for_user_info.pay_type == 2
              : ''
              " size="mini">积分</span>
            <span v-if="updateGoodsFrom.for_user_info
              ? updateGoodsFrom.for_user_info.pay_type == 3
              : ''
              " size="mini">提货券</span>
            <span v-if="updateGoodsFrom.for_user_info
              ? updateGoodsFrom.for_user_info.pay_type == 4
              : ''
              " size="mini">积分+提货券</span>
            <span v-if="updateGoodsFrom.for_user_info
              ? updateGoodsFrom.for_user_info.pay_type == 5
              : ''
              " size="mini">现金+积分</span>
            <span v-if="updateGoodsFrom.for_user_info
              ? updateGoodsFrom.for_user_info.pay_type == 6
              : ''
              " size="mini">现金+提货券</span>
            <span v-if="updateGoodsFrom.for_user_info
              ? updateGoodsFrom.for_user_info.pay_type == 7
              : ''
              " size="mini">现金+积分+提货券</span>
          </el-descriptions-item>
          <el-descriptions-item label="销售倍数区间">
            {{
              updateGoodsFrom.for_user_info
              ? updateGoodsFrom.for_user_info.sales_multiplier
              : "无"
            }}</el-descriptions-item>
          <el-descriptions-item label="关联用户标签">
            <span style="margin: 3px" :key="index" v-for="(item, index) in updateGoodsFrom.for_user_info
              ? updateGoodsFrom.for_user_info.related_user_tag_text
              : []" size="mini">{{ item.tag_name }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="关联用户分组">
            <span style="margin: 3px" :key="index" v-for="(item, index) in updateGoodsFrom.for_user_info
              ? updateGoodsFrom.for_user_info.related_user_group_text
              : []" size="mini">{{ item.name }}</span>
            <!-- {{
              updateGoodsFrom.for_user_info
                ? updateGoodsFrom.for_user_info.related_user_group_text
                : "无"
            }} -->
          </el-descriptions-item>
          <el-descriptions-item label="关联用户关系">
            <span style="margin: 3px" :key="index" v-for="(item, index) in updateGoodsFrom.for_user_info
              ? updateGoodsFrom.for_user_info.invitation_relationship_text
              : []" size="mini">{{ item.nickname }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="关联省市区地域" :span="3">
            <span style="margin: 3px" :key="index" v-for="(item, index) in updateGoodsFrom.for_user_info
              ? updateGoodsFrom.for_user_info.area_name
              : []" size="mini">
              <span v-for="(items, indexs) in item" :key="indexs">{{
                items.name
              }}</span>
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="是否优选推荐">
            <span v-if="updateGoodsFrom.for_user_info
              ? updateGoodsFrom.for_user_info.is_recommendation == 1
              : ''
              " size="mini">是</span>
            <span v-else type="danger" size="mini">否</span>
          </el-descriptions-item>
          <el-descriptions-item label="是否限购">
            <span v-if="updateGoodsFrom.for_user_info
              ? updateGoodsFrom.for_user_info.is_restricted == 1
              : ''
              " size="mini">是</span>
            <span v-else type="danger" size="mini">否</span>
          </el-descriptions-item>
          <el-descriptions-item label="每日限购数量">
            <span v-if="updateGoodsFrom.for_user_info
              ? updateGoodsFrom.for_user_info.is_restricted == 0
              : ''
              ">
              不限购
            </span>
            <span v-else>{{
              updateGoodsFrom.for_user_info
              ? updateGoodsFrom.for_user_info.daily_purchase_limit
              : ""
            }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="用户总限购数量">
            <span v-if="updateGoodsFrom.for_user_info
                  ? updateGoodsFrom.for_user_info.is_restricted == 0
                  : ''
                ">
              不限购
            </span>
            <span v-else>{{
              updateGoodsFrom.for_user_info
              ? updateGoodsFrom.for_user_info.total_purchase_limit
              : ""
            }}</span>
          </el-descriptions-item>
        </el-descriptions>
        <div class="informationTitleView">
          <div class="leftBox" style="padding-left: 0;">
            <div class="leftborder"></div>
            <div class="text">针对商户的规则</div>
          </div>
          <div class="right"></div>
        </div>
        <el-descriptions style="margin-top: 30px" class="margin-top" title="" :column="3">
          <el-descriptions-item label="提货方式">
            <span v-if="updateGoodsFrom.for_mer_info
              ? updateGoodsFrom.for_mer_info.pay_type == 1
              : ''
              " size="mini">现金</span>
            <span v-if="updateGoodsFrom.for_mer_info
              ? updateGoodsFrom.for_mer_info.pay_type == 2
              : ''
              " size="mini">积分</span>
            <span v-if="updateGoodsFrom.for_mer_info
              ? updateGoodsFrom.for_mer_info.pay_type == 3
              : ''
              " size="mini">提货券</span>
            <span v-if="updateGoodsFrom.for_mer_info
              ? updateGoodsFrom.for_mer_info.pay_type == 4
              : ''
              " size="mini">积分+提货券</span>
            <span v-if="updateGoodsFrom.for_mer_info
              ? updateGoodsFrom.for_mer_info.pay_type == 5
              : ''
              " size="mini">现金+积分</span>
            <span v-if="updateGoodsFrom.for_mer_info
              ? updateGoodsFrom.for_mer_info.pay_type == 6
              : ''
              " size="mini">现金+提货券</span>
            <span v-if="updateGoodsFrom.for_mer_info
              ? updateGoodsFrom.for_mer_info.pay_type == 7
              : ''
              " size="mini">现金+积分+提货券</span>
          </el-descriptions-item>
          <el-descriptions-item label="当前可选商户">
            <span style="margin: 3px" :key="index" v-for="(item, index) in updateGoodsFrom.for_mer_info
              ? updateGoodsFrom.for_mer_info.selection_limit_text
              : []" size="mini">{{ item.name }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="是否限制改价">
            <span v-if="updateGoodsFrom.for_mer_info
              ? updateGoodsFrom.for_mer_info.change_price_limit.type == 1
              : ''
              " size="mini">不限制</span>
            <span v-if="updateGoodsFrom.for_mer_info
              ? updateGoodsFrom.for_mer_info.change_price_limit.type == 2
              : ''
              " size="mini">不可改价</span>
            <span v-if="updateGoodsFrom.for_mer_info
              ? updateGoodsFrom.for_mer_info.change_price_limit.type == 3
              : ''
              " size="mini">须在规定范围内改价</span>
            <span v-if="updateGoodsFrom.for_mer_info
              ? updateGoodsFrom.for_mer_info.change_price_limit.type == 4
              : ''
              " size="mini">只允许增加建议零售价</span>
            <span v-if="updateGoodsFrom.for_mer_info
              ? updateGoodsFrom.for_mer_info.change_price_limit.type == 5
              : ''
              " size="mini">只允许减少建议零售价</span>
          </el-descriptions-item>
          <el-descriptions-item label="可增加比例" v-if="updateGoodsFrom.for_mer_info
            ? updateGoodsFrom.for_mer_info.change_price_limit.type == 3
            : false
            ">
            {{
              updateGoodsFrom.for_mer_info
              ? updateGoodsFrom.for_mer_info.change_price_limit.values
                .increment
              : ""
            }}</el-descriptions-item>
          <el-descriptions-item label="可减少比例" v-if="updateGoodsFrom.for_mer_info
                ? updateGoodsFrom.for_mer_info.change_price_limit.type == 3
                : false
              ">
            {{
              updateGoodsFrom.for_mer_info
              ? updateGoodsFrom.for_mer_info.change_price_limit.values
                .decrement
              : ""
            }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-drawer>
    <saveInventory ref="refInventory" />
  </div>
</template>

<script>
//引入添加选品抽屉
import add from './components/add.vue';
//引入编辑选品抽屉
import rule from './components/rule.vue'
import saveInventory from "./components/inventory.vue";
// 全部表头选项
const tableTheadOption = {
  id: { label: "ID", field: "id", minwidth: '80px' },
  shid: { label: "商户id", field: "shid", minwidth: '80px' },
  supplier_name: { label: "供货商", field: "supplier_name", minwidth: '100px' },
  sg_id: { label: "商品id", field: "id", minwidth: '100px' },
  sg_name: { label: "商品名称", field: "sg_name", minwidth: '200px' },
  type_text: { label: "商品类型", field: "type_text", minwidth: '100px' },
  product_code: { label: "商品编号", field: "product_code", minwidth: '150px' },
  main_image: { label: "商品缩略图", field: "main_image", minwidth: '100px' },
  status: { label: "生效状态", field: "status", minwidth: '100px' },
  created_at: { label: "创建时间", field: "created_at", minwidth: '100px' },
}
//全部表头
const allTableThead = ['id', 'shid', 'supplier_name', 'sg_id', 'sg_name', 'type_text', 'product_code', 'main_image', 'status', 'created_at']
//默认表头
const defaultTableThead = ['id', 'supplier_name', 'sg_name','product_code', 'main_image', 'status', 'created_at']
import {
  selectiondetail,
  selectiondestroy,
  selectionaudit,
  merchantselectionlst,
  selectionedit,
  detailSelection,
} from "@/api/merchant/index";
import { getDictionaryValueList } from "@/api/admin/dictionary.js";
import { getCategoryList } from "@/api/commodity/index";
import { getCateLis } from "@/api/supplier/index";

export default {
  name: "SelectGoods",
  data() {
    return {
      tableData:[],//分类
      id:'',
      ifshowrule:false,//编辑弹窗
      ruletitle:'编辑选品',//
      //查询
      goodsdetailx:'',
      goodsdetail:'',
      category_id:"",
      searchForm: {
        page: 1,
        count: 10,
        supplier_name:'',
        sg_name:'',
        category_id:'',
        start_time:'',
        end_time:''
      },
      //商品类目列表
      typeList: [
        { value: 1, label: "普通商品", },
        { value: 2, label: "卡密商品", },
        { value: 3, label: "虚拟商品", },
      ],
      //生效状态列表
      statusList: [
        {value: 1,label: "启用",},
        {value: 2,label: "禁用",},
      ],
      //是否展开余下查询
      ifShowSearch: false,
      searchFormtime:[],//时间
      // 动态显示表头默认表头
      tableTheadOptions: tableTheadOption,//表头选项
      allTableThead: allTableThead,//全部表头
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      tableKey: 1, // 为了保证table 每次都会重渲
      tableHeight: this.calculateTableHeight(), // 初始化表格高度
      //表格加载
      loading: false,
      //列表
      tableList: [],
      //总条数
      total: 0,
      //是否显示文字提示内容
      isShowTooltip: false,
      //抽屉标题
      drawerTitle: "",
      //是否打开添加选品抽屉
      ifshowadd:false,

      isShowAddGoodsDialog: false,
      btnLoading: false,
      dialogdictionary: false,
      activeName: "选品信息",
      subLoading: false,
      direction: "rtl", // 抽屉的出来形式
      // 选品详情是否处于编辑模式
      modifyShow: false,
      //   修改选品的表单
      updateGoodsFrom: {},
      updateGoodsRules: {},
      payTypeList: [], // 支付方式列表
      tempUpdatePayTypeList: [], // 选品更新时的支付方式
      tempUpdateCategoryId: "", // 选品分类改变
      goodsCategoryList: [], // 商品分类列表
      inventoryForm: {}, // 库存规格

      rules: {
        name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("名称不能为空"));
              }
              callback();
            },
            trigger: "blur",
          },
        ],
        security_deposit: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("请输入保证金"));
              }
              callback();
            },
            trigger: "blur",
          },
        ],
        demand: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("请输入类型要求"));
              }
              callback();
            },
            trigger: "blur",
          },
        ],
        lnstructions: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("请输入说明"));
              }
              callback();
            },
            trigger: "blur",
          },
        ],
        status: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("请选择状态"));
              }
              callback();
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  components: {
    add,
    rule,
    saveInventory
  },
  created() {
    this.doSearchGoods();
    this.getPayTypeList();
    this.getGoodsCategoryList();
    this.getcatelist()
  },
  mounted() {
    // 监听窗口大小变化，实时更新表格高度
    window.addEventListener('resize', this.handleResize);
  },
  watch: {
    //监听表头变化
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      );
      this.tableKey = this.tableKey + 1;
    },
  },
  methods: {
    //库存明细
    inventory_details(row){
      this.$refs.refInventory.open(row)
    },
    //获取商品类目
    getcatelist() {
      getCateLis().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          return this.$messages.error(res.msg);
        }
        this.tableData = res.data;
      });
    },
    // 窗口大小变化时重新计算表格高度
    handleResize() {
      this.tableHeight = this.calculateTableHeight();
    },
    // 根据实际需求计算表格高度
    calculateTableHeight() {
      return window.innerHeight - 136;
    },
    //单元格内容超出，显示文字提示内容
    onMouseOver(str) {
      const tag = this.$refs[str][0]
      const parentWidth = tag.parentNode.offsetWidth // 获取元素父级可视宽度
      const contentWidth = tag.offsetWidth // 获取元素可视宽度
      this.isShowTooltip = contentWidth <= parentWidth
    },
    // 打开抽屉
    addDrawer(title) {
      if(title=='添加选品'){
        this.drawerTitle = title;
        this.ifshowadd = true;
      }
      // this.$router.push("/merchant/selecgoods/add");
    },
    //关闭抽屉
    closeDrawer() {
      if(this.drawerTitle=='添加选品'){
        this.ifshowadd = false;
      }
      this.doSearchGoods();
    },
    // 获取支付方式
    async getPayTypeList() {
      const res = await getDictionaryValueList({
        DictionaryId: 10,
      });
      const { code, data, message } = res;
      if (code === 200) {
        this.payTypeList = data.list;
      } else {
        this.$message.error(message);
      }
    },
    // 查询选品列表
    doSearchGoods() {
      this.loading = true;
      //时间
      if(this.searchFormtime.length > 0){
        this.searchForm.start_time = this.searchFormtime[0]
        this.searchForm.end_time = this.searchFormtime[1]
      }
      if (this.category_id) {
        let arrayTests = this.category_id

        let [lastValue] = arrayTests.slice(-1);
        this.searchForm.category_id = arrayTests.length + ':' +lastValue
      }

      merchantselectionlst(this.searchForm)
        .then((res) => {
          this.loading = false;
          if (res.code !== 200) {
            this.$messages.error(res.msg);
            return;
          }
          this.total = res.data.total;
          this.tableList = res.data.list;
          this.searchForm.category_id = ''
          this.tableList.map((val) => {
            // (1.待审核,2.审核通过,3.审核未通过)
            if (val.apply_status === 1) {
              val.apply_text = "待审核";
            } else if (val.apply_status === 2) {
              val.apply_text = "审核通过";
            } else if (val.apply_status === 3) {
              val.apply_text = "审核未通过";
            }
            // "apply_type": 1, //审核类型(1.申请入驻,2.商户资料修改)
            if (val.type === 1) {
              val.type_text = "普通商品";
            } else if (val.type === 2) {
              val.type_text = "卡密商品";
            } else if (val.type === 3) {
              val.type_text = "虚拟商品";
            }
          });
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 修改选品状态
    switchShowWay(val) {
      this.loading = true;

      selectionaudit({ id: val.id, status: val.status })
        .then((res) => {
          if (res.code === 200) {
            this.$messages.success("修改成功");
            this.doSearchGoods();
          } else {
            this.$messages.error(res);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 修改选品
    goEditGoods(row) {
      this.ifshowrule = true
      selectiondetail({
        id: row.id
      }).then((res) => {
        this.goodsdetailx = res.data
        this.goodsdetail = res.data
      });

      // this.$router.push("/merchant/selecgoods/add?id=" + row.id);
    },
    //关闭配置选聘规则抽屉
    closeDrawers() {
      this.ifshowrule = false;
      this.goodsdetail = {}
    },
    // 重置选品列表搜索
    resetSearch() {
      this.searchForm.page = 1
      this.searchForm.count = 10
      this.searchForm.supplier_name = ''
      this.searchForm.sg_name = ''
      this.searchForm.category_id = ''
      this.searchForm.start_time = ''
      this.searchForm.end_time = ''
      this.searchForm.category_id = ''
      this.category_id = ''
      this.searchFormtime = []
      this.doSearchGoods();
    },
    userHandleClose(){
      this.dialogdictionary = false;
    },
    // 查看选品详情或者修改选品
    goEditGoodsOrDetail(row, isEdit) {
      // this.title = "编辑选品";
      this.dialogdictionary = true;
      this.btnLoading = true;
      // this.modifyShow = isEdit;
      detailSelection({ id: row.id })
        .then((res) => {
          this.btnLoading = false;
          this.updateGoodsFrom = res.data;
          console.log(this.updateGoodsFrom);
        })
        .catch(() => {
          this.$messages.error("获取数据失败,请重试");
          this.btnLoading = false;
          this.dialogdictionary = false;
        });
    },
    // 根据支付ID 获取支付name
    getPayTypeStr(payTypeIdsStr) {
      if (!payTypeIdsStr) return;
      const idsArr = payTypeIdsStr.split(",");
      const filterItems = this.payTypeList.filter((item) =>
        idsArr.includes(item.id)
      );
      let nameStr = "";
      if (filterItems.length > 0) {
        nameStr = filterItems.map((item) => item.tag_name);
      }
      return nameStr;
    },
    // 获取商品类目
    async getGoodsCategoryList() {
      const res = await getCategoryList();
      const { code, data, message } = res;
      if (code === 200) {
        this.goodsCategoryList = data;
        this.buildGoodsCategoryList(this.goodsCategoryList);
      } else {
        this.$message.error(message);
      }
    },
    // 把children为零的字段删除
    buildGoodsCategoryList(list) {
      for (let i = 0; i < list.length; i++) {
        const item = list[i];
        if (item.children && item.children.length === 0) {
          delete item.children;
        }
        if (item.children && item.children.length > 0) {
          this.buildGoodsCategoryList(item.children);
        }
      }
    },
    // 选品类目发生改变
    handleGoodsCategoryChange(value) {
      console.log("value==>", value);
    },
    // 更新选品
    doUpdate() {
      this.$refs.updateGoodsFromComp.validate(async (valid) => {
        if (valid) {
          // 更新
          const res = await selectionedit(this.updateGoodsFrom);
          console.log("res=>", res);
        } else {
          this.$message.error("请检查：有部分信息或图片尚未添加完整！");
        }
      });
    },

    // 删除选品
    delSelectGoods(row, index) {
      selectiondestroy({ id: row.id }).then((res) => {
        if (res.code === 200) {
          this.$messages.success("删除成功");
          this.doSearchGoods();
        } else {
          this.$messages.error(res.msg);
        }
      });
    },
    // 商户分类切换分页
    handleCurrentChange(val) {
      this.searchForm.page = val;
      this.doSearchGoods();
    },
    // 商户分类切换每页数量
    handleSizeChange(val) {
      this.searchForm.count = val;
      this.doSearchGoods();
    },
  },
  destroyed() {
    // 组件销毁时移除事件监听
    window.removeEventListener('resize', this.handleResize);
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 10px 20px;

  .searchForm {
    display: flex;
    .SearchBtn {
      display: flex;
      justify-content: flex-end;
    }
  }
  // 筛选超出隐藏
  .overoverflow-hidden {
    height: 50px;
    overflow: hidden;

  }

  .addAndTableRelate {
    display: flex;
    justify-content: space-between;
  }

}
</style>
<style lang="scss">
.el-button {
  height: 30px;
}

.margin-10 {
  margin: 10px;
}

.title {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
}

.sn {
  color: #606266;
  font-size: 13px;
}

.demo-table-expand {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  color: #515a6e;

  div {
    width: 30%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 12px;
  }
}

.marginTop {
  padding: 0 15px !important;
}

.sn {
  color: #606266;
  font-size: 13px;
}

.order_center {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px 0 0;
  font-size: 13px;
  color: #666;
}

.input-with-select .el-select .el-input {
  width: 110px !important;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

#editinput .el-select .el-input {
  width: 440px !important;
}

.commont-title {
  font-size: 16px;
  font-weight: 600;
}

label {
  font-weight: normal;
  font-size: 12px;
}
</style>
